<div id="map-container" style="display:none;">
	<div id="map-header">
		<div style="float:right; margin-right: 15px;">
			<a id="cerrar-mapa" href="#">CERRAR</a>
		</div>
	</div>

	<div id="map-canvas"></div>	
</div>

<script type="text/javascript">

	$(function() {
		$("#cerrar-mapa").click(function() {
			$("#map-container").fadeOut();		
		});
	});

	function showMapa()
	{
		$("#map-container").fadeIn();

		if(navigator.geolocation)
		{
			// Centro donde el browser diga
			navigator.geolocation.getCurrentPosition(
			function(position) {
				initMapa(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));	
			}, 
			function(msg) {
				alert("Error geolocation: " + msg);
			});
		}
		else
		{
			// Centro en uruguay
			initMapa(new google.maps.LatLng(-32.602362, -56.162136));
		}			
	}

	function initMapa(centerMap) 
	{
		// Json que contiene la lista de tenicos de la busqueda
		var json_lista_tts = <?php echo isset($json_lista_tts) ? $json_lista_tts : '[]';?>;

		var mapOptions = {
			zoom: 15,
			center: centerMap,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
		var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

		var pinBlue = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|0000FF");
  	    
		// Browser position
	    new google.maps.Marker({
	    	position: centerMap, 
	      	map: map, 
	      	title: "Usted está aqui",
	      	icon: pinBlue, 
	      	animation: google.maps.Animation.DROP
	  	});

	  	// Servicios		
		$.each(json_lista_tts, function() {

			// Tecnico
			var tts = this;
			
			// Creo el marker
			var marker = new google.maps.Marker({animation: google.maps.Animation.DROP, position: new google.maps.LatLng(this.coordenadas.split(',')[0], this.coordenadas.split(',')[1]), title: "tts: " + this.nombres + ", " + this.apellidos}) ;
			marker.setMap(map);

			// Eventos onclick sobre marker
			google.maps.event.addListener(marker, "click", function() { 
				var infoWin = new google.maps.InfoWindow({ content: getInfoMarker(tts)});
				infoWin.open(map, marker);				
			});
		});		
	}

	function getInfoMarker(tts)
	{
		return "<div class='info-marker-container'>" + 
			   "<label>Servicio: </label>" + tts.nombre_tipo_servicio + "<br/> " +
			   "<label>Nombre: </label>" + tts.nombres + " " + tts.apellidos + "<br/>" +
		 	   "<label>Valoracion: </label> ***** <br/>" +  
		  	   "<label>Precio/hr: </label>$ " + tts.precio_hora + "<br/>" +
		  	   
		  	   "<?php
	   				$user = get_user_auth();
	   				 if ($user['tipo'] == TIPO_USUARIO_CLIENTE):?><div style='margin: 5px 0px; padding: 5px; border-top: 1px solid #EBEBEB;'>" +		  	 	
			   "<a id='buscar' class='button-image' href='javascript:contratarTTS(" + tts.tts_id + ")'>" + 
			   "<img title='Contratar' alt='Contratar' src='<?php echo site_url(array('web', 'img', 'icon-cart.png'));?>'/>" +
			   "<label>Contratar</label>" + 
			   "</a></div> <?php endif;?> ";
	}

</script> 